<template>
	<div class='customization-demo'>
		<div class="background">
			<div class="background-content">
				<div class="name">陪伴模块定制</div>
				<div
					class="desc"
					v-html="'它可以让你心爱的玩具\n陪你聊天、讲故事、唱歌...\n快来定制属于自己的陪伴模块吧～'"
				/>
			</div>
			<img
				src="https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/Group%2058.png"
			>
		</div>
		<div class="container">
			<div class="step">
				<Step
					index="1"
					length="4"
					:title="roleMap.step1Title"
				>
					<Input
						:placeholder="roleMap.step1Placeholder"
						bgColor="#FBFBFB"
						border="3px solid #00C9A9"
						v-model="name"
					/>
					<div class="hint">{{roleMap.step1Hint}}</div>
				</Step>
			</div>
			<div class="step">
				<Step
					index="2"
					length="4"
					:title="roleMap.step2Title"
				>
					<div class="voices">
						<Button
							class="voice"
							v-for="(item,i) in voices"
							:key="item"
							radius="100"
							width="130"
							height="45"
							:bgColor="i === selectedVoice ? '#00C9A9' : '#EFF3F3'"
							:color="i === selectedVoice ? '#ffffff' : 'rgba(0, 61, 51, 0.5)'"
							fontSize="20"
							@click="selectedVoice=i"
						>
							{{item}}
						</Button>
					</div>
				</Step>
			</div>
			<div class="step">
				<Step
					index="3"
					length="4"
					:title="roleMap.step3Title"
				>
					<div class="functions">
						<div
							class="functions-item"
							v-for="(item,i) in functions"
							:key="item.label"
						>
							<div class="label">
								<Iconfont
									v-if="i === selectedFun"
									name="icon-a-Vector2"
									color="#00C9A9"
									size="20"
								/>
								{{item.label}}
							</div>
							<Button
								width="190"
								height="190"
								bgColor="#EFF3F3"
								:border="i === selectedFun ? '3px solid #00C9A9' : 'none'"
								@click="selectedFun=i;selectedMusicType=[]"
							>
								<img :src="item.img">
								<input
									class="select-file"
									v-if="item.selectFile"
									type="file"
								>
							</Button>
						</div>
					</div>
					<div
						v-if="musicTypes[functions[selectedFun].value]"
						class="music-types"
					>
						<Button
							class="music-types-item"
							v-for="(item,i) in musicTypes[functions[selectedFun].value]"
							:key="item"
							width="170"
							height="54"
							bgColor="#ffffff"
							color="rgba(0, 73, 62, 0.4)"
							fontSize="20"
							:border="selectedMusicType.indexOf(i)>-1 ? '2px solid #00C9A9' : '2px solid #DEEAE8'"
							@click="onclickMusicType(i)"
						>
							{{item}}
						</Button>
					</div>
				</Step>
			</div>
			<div class="step">
				<Step
					index="4"
					length="4"
					title="去定制"
				>
					<Button
						width="180"
						height="54"
						fontSize="20"
						@click="setHintModel"
					>
						{{roleMap.step4BtnText}}
						<Iconfont
							name="icon-arrow-right"
							color="#ffffff"
							size="20"
						/>
					</Button>
				</Step>
			</div>
		</div>
		<HintModel v-if="showHint" />
	</div>
</template>

<script>
import HintModel from './components/HintModel'
export default {
  components: {
    HintModel
  },
  props: {
    role: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showHint: false,
      name: '',
      voices: ['可爱', '甜美', '悦耳', '憨憨', '高效'],
      selectedVoice: 0,
      functions: [
        { label: '聊天', value: 'chat', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-image 13.png' },
        { label: '讲故事', value: 'story', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-Icon-10.png' },
        { label: '唱歌', value: 'sing', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-Icon-11.png' },
        { label: '自定义', value: 'custom', selectFile: true, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-image 14.png' },
      ],
      selectedFun: 0,
      musicTypes: {
        story: ['伊索寓言', '格林童话', '安徒生童话', '国外儿童名著'],
        sing: ['儿童音乐', '纯音乐', '古典音乐', '民谣音乐', '流行音乐', '爵士音乐', '摇滚音乐', '自定义+'],
      },
      selectedMusicType: []
    }
  },
  computed: {
    roleMap() {
      if (this.role === 'parent') {
        return {
          step1Title: '设置唤醒词',
          step1Placeholder: '设置唤醒词',
          step1Hint: '它听见唤醒词就会回应你的命令',
          step2Title: '语音音色',
          step3Title: '功能设定',
          step4BtnText: '去下单',
        }
      } else {
        return {
          step1Title: '它叫什么名字？',
          step1Placeholder: '给它取个名字',
          step1Hint: '它听见你叫它就会回应你的命令',
          step2Title: '它的声音是怎样的？',
          step3Title: '它能干什么？',
          step4BtnText: '去提交',
        }
      }
    }
  },
  methods: {
    setHintModel() {
      this.showHint = true
      setTimeout(() => {
        this.showHint = false
      }, 2000)
    },
    onclickMusicType(i) {
      const index = this.selectedMusicType.indexOf(i)

      if (index > -1) {
        this.selectedMusicType.splice(index, 1)
      } else {
        this.selectedMusicType.push(i)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.customization-demo {
  padding-top: 78px;
  background-color: #eff3f3;

  .background {
    &-content {
      position: absolute;
      top: 80px;
      left: 110px;
      z-index: 10;
      white-space: pre-line;

      .name {
        font-size: 54px;
        color: #ffffff;
        text-shadow: 2px 3px  #f1b3ad;
      }

      .desc {
        margin-top: 20px;
        font-size: 20px;
        line-height: 26px;
        color: #ffffff;
      }
    }

    img {
      width: 100%;
    }
  }

  .container {
    padding: 35px 60px;
    margin-top: -50px;
    background-color: #ffffff;
    border-radius: 22px 22px 0 0;

    .step {
      padding-bottom: 30px;
      margin-bottom: 10px;
    }

    .hint {
      margin-top: 14px;
      font-size: $sSmall;
      color: $color3;
    }

    .voices {
      display: flex;

      .voice {
        margin-right: 20px;
      }
    }

    .functions {
      display: flex;
      text-align: center;

      &-item {
        position: relative;
        margin-right: 20px;

        .label {
          margin-bottom: 10px;
        }

        .select-file {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          cursor: pointer;
          opacity: 0;
        }
      }
    }

    .music-types {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 24px;
      padding: 42px;
      margin-top: 30px;
      background-color: $bgColor2;
      border-radius: $rLarge;
    }
  }
}
</style>

